<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="list-row">
        <div class="list-content-row">
          <div class="list-content-row-left">
            <div class="list-search">
              <el-input type="text" :value="tagName" @input="tagName=$event" placeholder="请输入关键词..."></el-input>
              <a class="list-search-btn" :href="tagName?`${prefixUrl}/lpzxjh/${tagName}/`:'javascript: void(0)'">搜索</a>
            </div>
            <!-- 楼盘资讯列表 -->
            <informationList :listData="listData" :href="`${prefixUrl}/lpzxxq`"></informationList>
            <!-- 空数据 -->
            <el-empty description="暂无数据" v-if="empty"></el-empty>
          </div>
          <div class="list-content-row-right">
            <div class="form-row-title">免费专车看房</div>
            <div class="form-row">
              <div class="form-inline">
                <label class="form-label">您的称呼</label>
                <div class="form-item">
                  <el-radio v-model="sexRadio" label="女士">女士</el-radio>
                  <el-radio v-model="sexRadio" label="先生">先生</el-radio>
                </div>
              </div>
              <div class="form-inline">
                <label class="form-label">预约看房时间</label>
                <div class="form-item">
                  <el-date-picker
                    v-model="houseViewingDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    placeholder="选择日期"
                    :editable="false"
                    style="width: 100%;"
                  ></el-date-picker>
                </div>
              </div>
              <div class="form-inline">
                <label class="form-label">您的联系方式</label>
                <div class="form-item">
                  <el-input
                    type="text"
                    placeholder="请输入您的手机号"
                    v-model="phone"
                    maxlength="11"
                    show-word-limit
                  ></el-input>
                </div>
              </div>
              <div class="form-inline" v-if="smsState">
                <label class="form-label">验证码</label>
                <div class="form-item">
                  <el-input type="text" placeholder="请输入验证码" v-model="code" maxlength="6"></el-input>
                  <el-button
                    class="code-btn"
                    @click="subCode"
                    :disabled="codeDisabled"
                  >{{ codeText }}</el-button>
                </div>
              </div>
              <div class="form-inline" style="margin-bottom: 0">
                <div class="form-item">
                  <el-button
                    type="danger"
                    :disabled="subscribeDisabled"
                    @click="subscribe"
                    style="width: 100%;"
                  >预约免费专车看房</el-button>
                </div>
              </div>
            </div>
            <div style="height: 20px;"></div>
            <div class="list-content-row-right-list">
              <div class="right-list-title">推荐资讯</div>
              <ul>
                <li v-for="(item, index) in listDataTj" :key="index">
                  <a class="item-new" target="_black" :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">
                    <span :class="`${index<3?'ph':''}`">{{index+1}}</span>
                    <p class="text">{{item.title}}</p>
                  </a>
                </li>
              </ul>
            </div>
            <div style="height: 20px;"></div>
            <div class="list-content-row-right-list">
              <div class="right-list-title">新闻聚合</div>
              <div class="juhe-list">
                <a v-for="(item, index) in juheData" :key="index" :href="`${prefixUrl}/lpzxjh/${item}/`" target="_blank">{{item}}</a>
              </div>
            </div>
            <div style="height: 20px;"></div>
          </div>
        </div>
      </div>
      <div class="page-row" v-show="!empty">
        <el-pagination
          class="page-list"
          background
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          hide-on-single-page
          @current-change="pageChange"
        ></el-pagination>
      </div>
      <div style="width: 1200px;margin: 0 auto;">
        <!-- 关键区域，街道，周边 -->
        <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 订阅成功 -->
    <el-dialog
      width="280px"
      custom-class="Subscription-notification"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="SubscriptionSuess"
    >
      <div class="Subscription_Suess">
        <h3>{{ popupTitle }}</h3>
        <p>{{ popupDesc }}</p>
        <div class="Subscription_phone">
          <el-button class="Subscription_Dingyue_submit" @click="SubscriptionSuess = false">知道了</el-button>
        </div>
      </div>
      <div slot="footer" class="Subscription_Dingyue_fooetr">
        <p>Tips：稍后将电话联系您，请保持手机通畅。为保障您的服务体验，通话过程将会有录音</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import u from '@/plugins/Ccom'
import informationList from '@/components/information-list' // 楼盘资讯列表
var head = {
  title: '',
  content: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务',
  keywords: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务',
}
export default {
  components: {
    informationList,
  },
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [{ rel: 'stylesheet', href: '/css/lpzx.css' }],
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      sexRadio: '女士',
      houseViewingDate: '',
      subscribeDisabled: false,
      SubscriptionSuess: false,
      phone: '',
      code: '',
      codeText: '获取验证码',
      codeDisabled: false,
      loadTime: 60,
      popupTitle: '提交成功',
      popupDesc:
        '您已成功预约，稍后楼盘管家将联系您了解需求，为您定制专属置业报告。',
    }
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var cityCode = ctx.currentCity.cityCode
    var smsState = ctx.smsState
    var crumbListData = []
    var listData = []
    var listDataTj = []
    var pageNum = ctx.params.id ? Number(ctx.params.id.split('p')[1]) : 1
    var pageSize = 10
    var total = 1
    var pathUrlStr = ctx.params.id || 'p1'
    var empty = false
    var juheData = []
    var tagName = ctx.params.folder || ''
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: `${currentCity.cityName}楼盘资讯列表`,
        href: `${prefixUrl}${ctx.route.fullPath}`,
      },
    ]
    // 获取列表数据
    let getListData = await u.http({
      url: '/app/new/queryJHNewList',
      params: {
        pageNum,
        pageSize,
        tagName
      },
    })
    if (getListData.code == 200) {
      // 类型  1行业新闻，2公司动态， 3楼盘百科，4热门推荐
      getListData.data.list.forEach((item, index) => {
        switch (item.newsType) {
          case 1: item.newsTypeName = '行业新闻'; break
          case 2: item.newsTypeName = '公司动态'; break
          case 3: item.newsTypeName = '楼盘百科'; break
          case 4: item.newsTypeName = '热门推荐'; break
        }
        item.prefixUrl = prefixUrl
        // 时间戳更改
        item.nowAddTime = u.formatTime(item.addTime, 'Y-m-d H:i:s')
        listData.push(item)
      })
      total = getListData.data.total
      if (getListData.data.list.length < 1) {
        empty = true
      }
    }
    // 推荐资讯
    let getListDataTj = await u.http({
      url: '/app/new/queryNewList',
      params: {
        pathUrlStr,
        pageNum: 1,
        pageSize: 10,
        newsType: '',
        cityCode,
      },
    })
    if (getListDataTj.code == 200) {
      listDataTj = getListDataTj.data.list
    }
    // 新闻聚合
    let getJuheData = await u.http({
      url: '/pc/new/queryNewTagList',
      params: {
        cityCode
      }
    })
    if (getJuheData.code == 200) {
      juheData = getJuheData.data
    }
    // TDK
    let TDK_cityName = currentCity.cityName
    head.title = `${TDK_cityName}楼盘资讯-${TDK_cityName}新房-${TDK_cityName}楼盘-✖✖✖✖✖✖✖✖✖✖专业房屋买卖平台`
    head.content = `${TDK_cityName}新房，${TDK_cityName}新楼盘，${TDK_cityName}新房出售，${TDK_cityName}新开楼盘`
    head.keywords = `${TDK_cityName}✖✖✖✖✖✖✖✖✖✖为用户提供找房信息。包括${TDK_cityName}二手房、新房、${TDK_cityName}楼盘、问答等，挑好房就上${TDK_cityName}✖✖✖✖✖✖✖✖✖✖房地产信息网`

    return {
      prefixUrl,
      currentCity,
      cityList,
      cityCode,
      smsState,
      crumbListData,
      listData,
      listDataTj,
      pageNum,
      pageSize,
      total,
      empty,
      juheData,
      tagName,
      regionList: ctx.regionList
    }
  },
  mounted() {
    this.updatePageList()
  },
  methods: {
    // 分页追加A标签
    updatePageList() {
      // 设置分页路径
      let splitPathname = location.pathname.split('/')
      let pathnameLen = splitPathname.length > 0 ? splitPathname.length - 1 : 0
      let params = splitPathname[pathnameLen]
      let splitParams = params.split('-') // 拆分参数路径 重组路径
      let lidoc = document.querySelectorAll('.page-row .el-pager li')
      lidoc.forEach((item, index) => {
        let nowParams = 'javascript: void(0)'
        if (item.innerText) {
          if (item.innerText > 1) {
            let itemArr = [`p${item.innerText}`]
            nowParams =
              `${this.prefixUrl}/lpzxjh/${this.tagName}/` +
              this.repUrl(splitParams, itemArr)
          } else {
            nowParams =
              `${this.prefixUrl}/lpzxjh/${this.tagName}/` +
              this.repUrl(splitParams, [])
          }
        }
        item.innerHTML = `<a href="${nowParams}" style="display: block">${item.innerHTML}</a>`
      })
    },
    // 将两个数组合并新路径参数
    repUrl(arr, pageArr) {
      arr.forEach((item, index) => {
        if (/\p[1-9]\d*/.exec(item)) {
          arr.splice(index, 1)
        }
      })
      let nowArr = u.emptyArrayIsNull(arr.concat(pageArr))
      return nowArr.join('-')
    },
    // 分页发生改变
    pageChange(e) {
      let repVal = /\p[1-9]\d*/.exec(location.href)
        ? /\p[1-9]\d*/.exec(location.href)[0]
        : ''
      let nowHref =
        e > 1
          ? location.href.replace(repVal, `p${e}`)
          : location.href.replace(repVal, '')
      location.href = nowHref
    },
    // 触发验证码按钮
    subCode() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      var t = this.loadTime
      this.codeDisabled = true
      this.codeText = `${t}s重新获取`
      var clearLoadTime = setInterval((e) => {
        t--
        this.codeText = `${t}s重新获取`
        if (t < 1) {
          clearInterval(clearLoadTime)
          t = this.loadTime
          this.codeText = '重新获取'
          this.codeDisabled = false
        }
      }, 1000)
      this.getCode()
    },
    // 获取验证码
    getCode() {
      u.http({
        client: true,
        url: '/app/sms/loginCode',
        params: {
          phone: this.phone,
          countryCode: '86',
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          return
        }
      })
    },
    // 预约免费专车看房
    subscribe() {
      if (this.houseViewingDate == '') {
        this.$message({
          message: '请选择看房时间',
          type: 'warning',
        })
        return false
      }
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      if (this.smsState) {
        if (this.code == '') {
          this.$message({
            message: '请输入验证码',
            type: 'warning',
          })
          return false
        }
        this.validateCode()
        return false
      }
      this.subscribeCar()
    },
    // 验证手机号
    validateCode() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/user/login',
        params: {
          type: 2,
          phone: this.phone,
          code: this.code,
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
          return false
        }
        this.subscribeCar()
      })
    },
    // 预约专车
    subscribeCar() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/visitRecord/addVisitRecordByNoToken',
        params: {
          clickType: 9,
          phone: this.phone,
          amentTime: this.houseViewingDate,
          houseName: this.houseName,
          estateId: this.estateId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.SubscriptionSuess = true
          setTimeout((e) => {
            this.subscribeDisabled = false
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
        }
      })
    },
  },
}
</script>